<template>
	<view>
		<!-- 搜索历史 -->
		<!-- searchList.length===0搜索后的列表为空 搜索历史才会显示-->
	<template v-if="searchList.length===0">
		 <view class="py-2 font-md">搜索历史</view>
		 <view class="flex flex-wrap ">
		 	<view class="border rounded font mx-1 my-1 px-2" v-for="(item,index) in list" :key="index" @click="clickSearchHistory(item)">
		 		{{item}}
		 	</view>
		 </view>
	</template>
		<!-- 搜索后的数据显示 -->
		<template v-else>
			<block v-for="(item,index) in searchList":key="index">
				<common-list :item="item" :index="index"></common-list>
			</block>
		</template>
		
	</view>
</template>

<script>
	const demo = [
	  {
	    username: "昵称",
	    userpic: "/static/topboy.png", //头像
	    newstime: "2020-12-10下午4.30", //时间
	    isFollow: false, //判断当前用户是否已经关注
	    title: "我是标题", //标题
	    titlepic: "/static/demo/d524b2c83a0460a0556117a96f37b6f.png", //标题下的图片
	    support: {
	      // 点赞 反赞
	      type: "",
	      support_count: 0,
	      unsupport_count: 0,
	    },
	    // 评论
	    comment_count: 0,
	    // 分享
	    share_num: 0,
	  },
	  {
	    username: "昵称",
	    userpic: "/static/topboy.png", //头像
	    newstime: "2020-12-10下午4.30", //时间
	    isFollow: false,
	    title: "我是标题", //标题
	    titlepic: "", //标题下的图片
	    support: {
	      // 点赞 反赞
	      type: "", //如果type=support就是点赞 动态添加class type=unsupport就是踩 动态添加class
	      support_count: 0,
	      unsupport_count: 2,
	    },
	    // 评论
	    comment_count: 2,
	    // 分享
	    share_num: 2,
	  },
	  {
	    username: "昵称",
	    userpic: "/static/topboy.png", //头像
	    newstime: "2020-12-10下午4.30", //时间
	    isFollow: false,
	    title: "我是标题", //标题
	    titlepic: "", //标题下的图片
	    support: {
	      // 点赞 反赞
	      type: "", //如果type=support就是点赞 动态添加class type=unsupport就是踩 动态添加class
	      support_count: 0,
	      unsupport_count: 2,
	    },
	    // 评论
	    comment_count: 2,
	    // 分享
	    share_num: 2,
	  },
	];
	import CommonList from '@/components/common/common-list.vue'
	export default {
		components:{
			CommonList
		},
		data() {
			return {
				// 搜索框内容
				searchText:"",
				// 搜索后的列表
				searchList:[],
				list: ["uni-app交友实战", "uni-app第二季小米商城", "uni-app第三季访微信"],
				
			}
		},
		// 实现搜索功能2步  1监听导航栏输入事件 2监听按钮搜索点击事件
		// 1监听导航栏输入事件
		onNavigationBarSearchInputChanged(e) {
			console.log(e)
			this.searchText=e.text;
		},
		// 2监听按钮搜索点击事件
		onNavigationBarButtonTap(e) {
			// e里面会有一个index代表当前按钮的索引值
			console.log(e)
			if(e.index===0){
				// 调用搜索事件
				this.searchEvent()
			}
		},
		methods:{
			// 点击搜索历史出发的事件
			clickSearchHistory(text){
				// 重新赋值搜索框内容
				this.searchText=text;
				this.searchEvent()
			},
			// 开始搜索
			searchEvent(){
				// 搜索的时候打完字把键盘收起来
				uni.hideKeyboard();
				// 显示搜索加载状态
				uni.showLoading({
				    title: '加载中',
					mask:false
				});
				// 开始请求搜索
				setTimeout(()=>{
					this.searchList=demo;
					// 获取到数据之后隐藏loading状态
					  uni.hideLoading();
				},2000)
			}
		}
	}
</script>

<style>
</style>
